<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>测试perfect scrollbar 和 jquery ui 的selectable的兼容</title>
		<link rel="stylesheet" href="../../js/lib/jquery-ui-1.12.1/start/jquery-ui.css">
		<link rel="stylesheet" href="../../js/lib/jquery-ui-1.12.1/start/jquery-ui.theme.css">
		<link rel="stylesheet" href="../../js/lib/jquery-ui-1.12.1/start/jquery-ui.structure.css">
		<script src="../../js/lib/jquery-ui-1.12.1/start/external/jquery/jquery.js"></script>
		<script src="../../js/lib/jquery-ui-1.12.1/start/jquery-ui.js"></script>

		<link rel="stylesheet" type="text/css" href="../../js/lib/perfect-scrollbar-v0.8.1/css/perfect-scrollbar.css" />
		<script src="../../js/lib/perfect-scrollbar-v0.8.1/js/perfect-scrollbar.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#selectable {
				border: 1px solid dodgerblue;
				position: relative;
				width: 400px;
				height: 300px;
				overflow-y: scroll;
			}
			
			#selectable .ui-selecting {
				background: #ccc;
			}
			
			#selectable .ui-selected {
				background: #999;
			}
		</style>
	</head>

	<body>
		<h1>测试perfect scrollbar 和 jquery ui 的selectable的兼容</h1>
		<ul id="selectable">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
		</ul>
		<script type="text/javascript">
			Ps.initialize(document.querySelector('#selectable'));
			$('#selectable').on('ps-scroll-y', function() {
				console.log('scroll y');
				$("#selectable").selectable('refresh');
			})
			$("#selectable").selectable();
		</script>
	</body>

</html>